
<template>
  <div>
    <ul class="uploader-list cf">
      <li v-for="(item, index) in picJson.imgLista">
        <div class="pic">
          <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1" @click="previewPic(index)">
          <img :src="item" v-else @click="previewPic(index)">
          <i class="iconfont icon-del" @click="delImg(item)"></i>
        </div>
      </li>
      <li>
        <div class="pic" @click="getImage()">
          <i class="iconfont icon-add"></i>
        </div>
      </li>
      <!-- <previewer :list="prelist" ref="previewer"></previewer> -->
    </ul>
    <div class="mask" v-if="showPic" @click="showPic=''"></div>
    <div class="pre-pic" v-if="showPic" @click="showPic=''"><img :src="showPic"></div>
  </div>
</template>

<script>
export default {
  props: ["word", "list"],
  data() {
    return {
      prelist: [],
      showPic:'',
    };
  },
  computed: {
    picJson() {
      if (this.list) {
        var arr = {};
        arr.imgLista = this.list.imgLista;
        arr.imgListBase = this.list.imgListBase;
        return arr;
      } else {
        return "";
      }
    },
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  created() {
    this.changeDate();
  },
  watch: {
    picJson: {
      handler() {
        this.changeDate();
      },
      deep: true
    }
  },
  methods: {
    changeDate() {
      //重组list
      var value = [];
      this.prelist = [];
      if (this.picJson.imgLista) {
        for (var i = 0; i < this.picJson.imgLista.length; i++) {
          if (this.picJson.imgLista[i].indexOf("File") > -1) {
            value = "https://image.csyaoly.com" + this.picJson.imgLista[i];
          } else {
            value = this.picJson.imgLista[i];
          }
          this.prelist.push(value);
        }
      }
    },
    previewPic: function(index) {
      this.showPic = this.prelist[index];
    },
    getImage() {
      var self = this;
      let currentSize = !this.picJson.imgLista?0:this.picJson.imgLista.length;
      if (currentSize == 9) {
        self.$vux.toast.show({
          type: "text", //success, warn, cancel, text
          text: "最多上传9张图片"
        });
        return false;
      } else {
        self.jWeixin.chooseImage({
          count: 9 - currentSize, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            if (self.picJson.imgLista.length + localIds.length > 9) {
              self.$vux.toast.show({
                type: "text", //success, warn, cancel, text
                text: "最多上传9张图片"
              });
              return false;
            }
            localIds.forEach(li => {
              self.picJson.imgLista.push(li);
            });
            self.getLocalImgDataC(currentSize);
          }
        });
      }
    },

    getLocalImgDataC(index) {
      var self = this;
      this.jWeixin.getLocalImgData({
        localId: self.picJson.imgLista[index], // 图片的localID
        success: function(res) {
          let localData = res.localData;
          if (window.__wxjs_is_wkwebview) {
            var imgbase64 = localData.substr(
              localData.indexOf("base64") + 7,
              localData.length
            );
            self.picJson.imgLista.splice(index, 1, localData);
            self.picJson.imgListBase.push(imgbase64);
          } else {
            self.picJson.imgListBase.push(localData);
          }
          self.getLocalImgDataC(index + 1);
        }
      });
    },
    
    //删除图片
    delImg(item) {
      var minus = 0,
          self = this;
      for(var i=0; i < self.picJson.imgLista.length; i++) {
        if(self.picJson.imgLista[i].indexOf('File') > -1) {
          minus++;
        }
      }
      function checkVal(data) {
          return data == item;
      }
      var idx = self.picJson.imgLista.findIndex(checkVal);
      self.picJson.imgLista.splice(idx, 1);
      //如果删除的是local资源
      if(item.indexOf('File') < 0)
      {
        self.picJson.imgListBase.splice(idx - minus, 1);
      }
    }
  }
};
</script>